<template>
	<div>
		<div style="border: 1px solid #ccc; margin: 10rpx 20rpx;border-radius: 20rpx;padding-bottom: 20rpx;">
			<div style="text-align: center;margin-bottom: 20rpx;">
				<h2 style="line-height: 80rpx;">{{ workName }}</h2>
			</div>
			<div style="padding-left: 10px;padding-bottom: 20rpx;" v-if="testDetail && testDetail.remark">
				作业说明: {{ testDetail && testDetail.remark }}
			</div>
			<div class="exam-list" v-if="testPreview.length !== 0">
				<div class="exam-item" v-for="(item, index) in testPreview" :key="item.id">
					<div class="exam-item-line">
						<div class="exam-item-left">{{ index + 1 }}.</div>
						<div class="exam-item-right">
							<span v-if="item.type == 1">(单选题)</span>
							<span v-if="item.type == 2">(多选题)</span>
							<span v-if="item.type == 3">(判断题)</span>
							<span>
								{{ item.title }}
							</span>
						</div>
					</div>
					<div class="exam-item-line" v-if="item.type == 1 || item.type == 2">
						<div class="exam-item-left">选项:</div>
						<div class="exam-item-right">
							<div style="display: flex;" v-for="(opt, idx) in item.choose" :key="idx">
								<div>{{ xuanxiang[idx] }}:</div>
								<div style="margin-left: 10rpx;">{{ opt }}</div>
							</div>
						</div>
					</div>
					<div class="exam-item-line">
						<div class="exam-item-left">答案:</div>
						<div class="exam-item-right">
							<template v-if="item.type == 1">
								<radio-group v-model="item.stuAnswer" @change="(arr) => selectQuestionChange(arr, item)">
									<label v-for="(opt, index) in item.choose"><radio :value="index + 1 + ''"/>{{ xuanxiang[index] }}</label>
								</radio-group>
							</template>
							
							<template v-if="item.type == 2">
								<checkbox-group v-model="item.stuAnswer" @change="(arr) => selectQuestionChange(arr, item)">
									<label v-for="(opt, index) in item.choose"><checkbox :value="index + 1 + ''"/>{{ xuanxiang[index] }}</label>
								</checkbox-group>
							</template>
							<template v-if="item.type == 3">
								<radio-group v-model="item.stuAnswer" @change="(arr) => selectQuestionChange(arr, item)">
									<label><radio value="1"/>√</label>
									<label><radio value="2"/>×</label>
								</radio-group>
							</template>
						</div>
					</div>
				</div>
				
				<div style="text-align: right;overflow: hidden;">
					<button @click="submitExam" style="width: 170rpx; height: 100rpx;float: right;margin-top: 40rpx;margin-right: 20rpx;">提交</button>
				</div>
			</div>
			
			<div style="padding: 20rpx 30rpx; text-align: center;" v-else>
				暂无数据
			</div>
		</div>
	</div>

		
</template>

<script>
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 9999,
				workId: "",
				workName: "",
				stu_list: [

				],
				status_list: ['未读', '未完成', '已完成'],
				// 作业状态（1：未读；2：未完成；3：已完成）
				// testPreview: [],
				xuanxiang: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
				
				testPreview: [],
				testDetail: null
				
			}
		},
		onLoad(option) {
			this.workId = option.workId;
			this.workName = option.workName;
			this.getWorkScoreListTea();
			this.testingDetailStu();
		},
		created() {
		},
		methods: {
			submitExam() {
			  const { workId } = this;
			  this.pyReq(
				this.$http.commitAllTestStu,
				{ workId },
				res => {
				  if(res.code == 0) {
					const { wordId, workName } = this;
					var pages = getCurrentPages();//当前页
					var beforePage = pages[pages.length - 2];//上个页面
					// #ifdef H5
					beforePage.getUserInfo()
					// #endif
					// #ifndef H5
					beforePage.$vm.getUserInfo()
					// #endif
					uni.navigateBack();
					// uni.redirectTo({
						// url: "./stu_detail?workId=" + workId + "&workName=" + workName
					// });
				  }
				}
			  );
		
			},
			selectQuestionChange(e, item) {
				var data = e.detail.value;
				const { workId } = this;
				const { id } = item;
				var stuAnswer = null;
				if(item.type == 2) {
					stuAnswer = data.map(item => item - 0).sort().map(item => "##" + item).join("") + "##" 
					this.commitTest(id, stuAnswer, workId);
				} else {
					stuAnswer = "##" + data + "##";
					this.commitTest(id, stuAnswer, workId);
				}
			},
			handleChange() {
				console.log(this.termWorkName);
			},
			testingDetailStu() {
				const { workId } = this;
				this.pyReq(this.$http.getWorkDetailStu, {
					workId
				}, (res) => {
					this.testDetail = res.result;
				});
			},
			
			commitTest(testId, answer, workId) {
				this.pyReq(this.$http.commitTestStu, {
					testId, answer, workId
				}, (res) => {
					console.log(res);
				});
			},
			getWorkScoreListTea() {
				const {
					pageNo,
					pageSize,
					workId
				} = this;
				this.pyReq(this.$http.getWorkTestDetailStu, {
					pageNo,
					pageSize,
					workId,
				}, (res) => {
					if (res.code == 0) {
						this.testPreview = (res.result.records || []).map(item => {
							var str1 = null;
							var str2 = null;
							if(item.stuAnswer) {
								str1 = item.stuAnswer.map(item => item - 0).sort().join("");
							}
							if(item.testAnswer) {
								str2 = item.testAnswer.map(item => item - 0).sort().join("");
							}
							var stuAnswer = "";
										
							if(item.type == 1 && item.stuAnswer) {
								stuAnswer = item.stuAnswer[0] - 0;
							}
							if(item.type == 2 && item.stuAnswer) {
								stuAnswer = item.stuAnswer;
							}
							if(item.type == 3 && item.stuAnswer) {
								stuAnswer = item.stuAnswer[0];
							}
							return {
								...item,
								isTrue: str1 == str2,
								stuAnswer: stuAnswer || item.stuAnswer,
							};
						});
					}
				});
			}
		},
	}
</script>

<style>
	.exam-item {
		position: relative;
		margin-bottom: 20rpx;
	}
	.exam-item::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -20rpx;
		transform: translateX(-50%);
		height: 1px;
		background-color: #eee;
		width: 50%;
	}
	.exam-item-line {
		display: flex;
		margin-bottom: 10rpx;
	}
	.exam-item-left {
		width: 90rpx;
		text-align: right;
	}
	.exam-item-right {
		flex: 1;
		margin-left: 10rpx;
	}
</style>
